<html>
  <head>

    <link href="themes/redmond/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
  <link href="Scripts/jtable/themes/lightcolor/blue/jtable.css" rel="stylesheet" type="text/css" />

  <script src="scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script src="scripts/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
    <script src="Scripts/jtable/jquery.jtable.js" type="text/javascript"></script>

  </head>
  <body>
  <div id="PeopleTableContainer" style="width: 600px;"></div>
  <script type="text/javascript">

    $(document).ready(function () {

        //Prepare jTable
      $('#PeopleTableContainer').jtable({
        title: 'Table of users',
        paging: true,
        pageSize: 6,
        sorting: true,
        defaultSorting: 'id DESC',
        actions: {
          listAction: 'PersonActionsPagedSorted.php?action=list',
          createAction: 'PersonActionsPagedSorted.php?action=create',
          updateAction: 'PersonActionsPagedSorted.php?action=update',
          deleteAction: 'PersonActionsPagedSorted.php?action=delete'
        },
        fields: {
          id: {
            key: true,
            create: false,
            edit: false,
            list: false
          },
          name: {
            title: 'User Name',
            width: '40%'
          },
          email: {
            title: 'Email',
            width: '20%'
          },
          added_date: {
            title: 'Added date',
            width: '30%',
            type: 'date',
            create: false,
            edit: true
          },
          status: {
            title: 'Status',
            width: '20%'
          }
        }
      });

      //Load person list from server
      $('#PeopleTableContainer').jtable('load');

    });

  </script>

  </body>
</html>
